var vm = new Vue( {
    el : '#editmyinfo' ,
    data : {
        user_id : '' ,
        user_name : '' ,
        city : '' ,
        web_token : '' ,
        name : '' ,
        code : '' ,
        account : '' ,
        image : '' ,
        url : oss_url ,
        image_tmp : '' ,
        user_image : '',
        loading : false
    } ,
    methods : {
        init : function () {
            $.ajax( {
                url : "/api/My/myAccount" ,
                type : 'post' ,
                data : {
                    id : this.user_id
                } ,
                success : function ( ret ) {
                    if ( 200 == ret.status ) {
                        vm.user_image   = vm.url + ret.data.image;
                        vm.account      = ret.data.account;
                    }
                }
            } );
        } ,
        // 获取验证码
        getCode : function ( event ) {
            var url = '/userweb/my/codeGet';
            var el = event.currentTarget;
            var data = {
                id : this.user_id
            };
            this.$http.post( url , data , {
                emulateJSON : true
            } ).then( function ( res ) {
                if ( res.data.status == 200 ) {
                    this.account = res.data.data.account;
                    function invokeSettime( obj ) {
                        var countdown = 60;
                        settime( obj );
                        function settime( obj ) {
                            var text = '<div class="my_title_zh">获取验证码</div>' +
                                       '<div class="my_title_en">Get the verify</div>';
                            if ( countdown == 0 ) {
                                $( obj ).attr( "disabled" , false );
                                $( obj ).html( text );
                                countdown = 60;
                                return;
                            } else {
                                var html = '<div class="code_time">' +
                                           '<div class="code_time_s">' + countdown + 'S</div>' +
                                           '<div class="code_time_text">' +
                                           '<div>重新发送</div>' +
                                           '<div>Resend</div>' +
                                           '</div>' +
                                           '</div>';
                                $( obj ).attr( "disabled" , true );
                                $( obj ).html( html );
                                countdown--;
                            }
                            setTimeout( function () {
                                settime( obj );
                            } , 1000 );
                        }
                    }

                    new invokeSettime( el );
                } else {
                    layer.msg( res.data.msg ,{
                        skin:'winning-class',
                        time:3000
                    });
                }
            } , function ( res ) {

            } );
        } ,
        // 修改资料
        submit : function () {
            var url = '/userweb/my/usernameEdit';
            var data = {
                id :    this.user_id,
                name :  this.user_name,
                code :  this.code ,
                account : this.account
            };
            if (this.user_name.length==0) {
                return layer.msg( '缺少用户名' ,{
                    skin:'winning-class',
                    time:3000
                });
            }
            if (this.code.length==0) {
                return layer.msg( '缺少验证码' ,{
                    skin:'winning-class',
                    time:3000
                });
            }
            if (this.account.length==0) {
                return layer.msg( '缺少手机号' ,{
                    skin:'winning-class',
                    time:3000
                });
            }
            this.$http.post( url , data , {
                emulateJSON : true
            } ).then( function ( res ) {
                if ( res.data.status == 200 ) {
                    localStorage.setItem('user_name',data.name);
                    layer.msg( res.data.msg ,{
                        skin:'winning-class',
                        time:3000
                    });
                    setTimeout( "location.href = '/userweb/index/myinfo.html'" , 1000 );
                } else {
                    layer.msg( res.data.msg ,{
                        skin:'winning-class',
                        time:3000
                    });
                }
            } , function ( res ) {

            } );
        } ,
        //上传头像
        upload : function () {
            var id = localStorage.getItem( 'user_id' ) , url = '/userweb/My/upSupplyImg' , _this = this ,
                data = { id : id , image : _this.image_tmp };
            var uploaded_image = $( "#uploaded_image" ).attr( 'src' );
            if ( data.image == '' ) {
                return layer.msg( '请先上传图片' ,{
                    skin:'winning-class',
                    time:3000
                });
            }
            axios.post( url , data , {
                emulateJSON : true
            } ).then( function ( res ) {
                if ( res.data.status == 200 ) {
                    localStorage.user_image = _this.url + _this.image_tmp;
                    _this.user_image = _this.url + _this.image_tmp;
                    layer.msg( res.data.msg ,{
                        skin:'winning-class',
                        time:3000
                    });
					per_information();
                }
            } , function ( res ) {
            } );
        } ,
        // 上传图片
        uploadImg : function ( e ) {
            this.loading = true;
            var data = new FormData() , _this = this , html = '' , url = '/userweb/My/uploadImg' , name , ext;
            data.append( e.target.id , e.target.files[ 0 ] );
            data.append( 'dir' , 'user' );
            data.append( 'name' , e.target.id );
            axios.post( url , data , {
                emulateJSON : true
            } ).then( function ( res ) {
                if ( res.data.status == 200 ) {
                    _this.image_tmp = res.data[ e.target.id ][ 0 ];
                    name = _this.image_tmp.split( '/' )[ 1 ].split( '.' )[ 0 ];
                    ext = _this.image_tmp.split( '/' )[ 1 ].split( '.' )[ 1 ];
                    html += "<div style=\"position: relative;\" class='form-group' id='" + name + "' >";
                    html += "<img id='uploaded_image' src='"+oss_url + _this.image_tmp + "' />";
                    html += "<a href='javascript:void(0);' class='img_remove_a' onclick='removeNodes(\"" + name + "\",\"" + ext + "\",\"" + e.target.id + "\")'></a>";
                    html += "</div>";
                    $( '.' + e.target.id ).html( html );
                }else if (res.data.status == 209) {
                    layer.msg('请上传正方形的图片</br>please upload a square picture',{
                        skin:'winning-class',
                        time:3000
                    })
                }else {
                    layer.msg('上传失败</br>upload failure',{
                        skin:'winning-class',
                        time:3000
                    })
                }
                _this.loading = false;
            } , function ( res ) {

            } );
        }
    } ,
    mounted : function () {
        this.user_id    = localStorage.getItem('user_id');
        this.user_name  = localStorage.getItem('user_name');
        this.city       = localStorage.getItem('city');
        this.user_image = localStorage.getItem('user_image');
        if (!this.city){
            this.city       = 'Devon County';
        }
        this.init();
    }
} );

//删除图片
function removeNodes( name , ext , id ) {
    vm.loading = true;
    var path = 'user/' + name + '.' + ext;
    var data = { path : path } , url = '/userweb/My/delImg';
    $.ajax( {
        url : url ,
        dataType : 'json' ,
        type : 'POST' ,
        data : data ,
        success : function ( res ) {
            if ( res.status == 200 ) {
                vm[ id ] = '';
                $( "#" + name ).remove();
                $( "#" + id ).val( '' );
            }
            vm.loading = false;
        } ,
        error : function () {
            layer.msg( '网络错误！' ,{
                skin:'winning-class',
                time:3000
            });
        }
    } );
    this.user_id = localStorage.getItem( 'user_id' );
    this.user_name = localStorage.getItem( 'user_name' );
    this.city = localStorage.getItem( 'city' );
    this.web_token = localStorage.getItem( 'web_token' );
    if ( !this.user_id ) {
        window.location.href = "/userweb/index/login";
    }

}